<template>
	<view>
		<button type="default" class="btn" @click="btnClick">
		  <span class="circle" v-if="isloading&&!isSuccess"></span>
		  <span v-else-if="!isloading&&!isSuccess">{{title}}</span>
		  <span class=" iconfont icon-duigou" v-else="isSuccess"></span>
		</button>
	</view>
</template>

<script>
	export default {
    props:{
      isloading:{
        type:Boolean,
        default:false
      },
      isSuccess:{
        type:Boolean,
        default:false
      },
      title:String
    },
		data() {
			return {
				
			};
		},
    methods:{
      btnClick(){
        this.$emit('btnClick')
      }
    }
	}
</script>

<style lang="scss">
uni-button{
  width: px2vw(630);
  // border-radius: px2vh(8);
}
.circle {
    display: inline-block;
    width: px2vw(18);
    height: px2vw(18);
    background: 0 0;
    border: 4px solid #fff;
    border-radius: 50%;
    -webkit-clip-path: inset(0 0 50% 0);
    clip-path: inset(0 0 50% 0);
    animation: circle .6s linear infinite;
    vertical-align: middle;
  }

  @keyframes circle {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
  .icon-duigou{
    font-size: px2vw(30);
    color: #ffffff;
  }
</style>
